<!-- 交接班 抄表记录MOCK -->
<template>
  <px-scrollbar>
    <div class="equip-wrap-common">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" inline label-width="120px">
        <px-form-item label="时间">
          <px-date-picker
            v-model="queryParams.times"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </px-form-item>
        <px-form-item label="科室">
          <px-select v-model="queryParams.className" clearable placeholder="请选择科室">
            <px-option v-for="item in classNameArr" :key="item.id" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="抄表状态">
          <px-select v-model="queryParams.status" clearable>
            <px-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="系统名称">
          <px-input v-model="queryParams.systemCode" placeholder="请输入" autocomplete="off" clearable />
        </px-form-item>
        <px-form-item label="抄表组">
          <px-input v-model="queryParams.group" placeholder="请输入" autocomplete="off" clearable />
        </px-form-item>
        <px-form-item label="抄表名称">
          <px-input v-model="queryParams.name" placeholder="请输入" autocomplete="off" clearable />
        </px-form-item>
        <px-button type="primary" @click="queryTable">查询</px-button>
        <px-button @click="resetTable">重置</px-button>
      </px-form>
      <!-- <div class="inspection-table-btns">
      <px-button type="primary" :disabled="selectIds.length === 0" @click="batchDownload"> 批量导出 </px-button>
    </div> -->
      <div style="position: relative">
        <px-table :data="tableData" class="equip-table" height="500" border>
          <px-table-column type="index" label="序号" width="60" align="center" />
          <px-table-column prop="group" label="抄表组" min-width="120" show-overflow-tooltip />
          <px-table-column prop="name" label="抄表名称" min-width="120" show-overflow-tooltip />
          <px-table-column prop="spec" label="SPEC" min-width="120" show-overflow-tooltip />
          <px-table-column prop="planTime" label="计划抄表时间" min-width="120" show-overflow-tooltip />
          <!-- <px-table-column prop="approverName" label="审批人" min-width="120" show-overflow-tooltip /> -->
          <px-table-column prop="actualTime" label="实际抄表时间" min-width="120" show-overflow-tooltip />
          <px-table-column prop="system" label="所属系统" min-width="120" show-overflow-tooltip />
          <!-- <px-table-column prop="approveTime" label="审核时间" min-width="120" show-overflow-tooltip /> -->
          <px-table-column prop="operator" label="抄表人" min-width="120" show-overflow-tooltip />
          <!-- <px-table-column fixed="right" label="操作" min-width="180" align="center">
            <template #default="scope">
              <px-tooltip content="查看" placement="top">
                <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column> -->
        </px-table>
        <pagination
          v-show="total > 0"
          :page="queryParams.pageNum"
          :limit="queryParams.pageSize"
          class="inspection-pagination"
          :total="total"
          @pagination="queryTable"
        />
      </div>
    </div>
  </px-scrollbar>
</template>

<script setup lang="ts">
defineOptions({
  name: "SYS_AMR_RECORDS"
});
import { queryDictData } from "@/api/common";
import { getCurrentInstance, onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const { proxy }: any = getCurrentInstance();

const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  classNameArr: [],
  statusArr: [
    { label: "已完成", value: 3 },
    { label: "未抄表", value: 4 }
  ],
  queryParams: {
    times: "",
    className: route.query.className ? route.query.className.toUpperCase() : "",
    status: "",
    systemCode: "",
    group: "",
    name: "",
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  tableData: [
    {
      group: "水平衡",
      name: "水科废化学品间及酸碱间巡检表",
      spc: "1",
      planTime: "2024-09-02 16:00",
      actualTime: "2024-09-02 18:00",
      system: "创新中心厂务",
      operator: "系统"
    },
    {
      group: "水泵",
      name: "运行记录表-水泵",
      spc: "0",
      planTime: "2024-09-02 16:00",
      actualTime: "2024-09-02 18:00",
      system: "创新中心厂务",
      operator: "系统"
    },
    {
      group: "水",
      name: "运行记录表-VOC+CR+MAU",
      spc: "0",
      planTime: "2024-09-02 16:00",
      actualTime: "2024-09-02 18:00",
      system: "创新中心厂务",
      operator: "系统"
    }
  ],
  checkLogId: ""
});
const { isView, isMain, classNameArr, statusArr, queryParams, total, tableData, checkLogId } = toRefs(state);

// 进入页面时触发
onMounted(() => {
  querySelectList();
  queryTable();
});

const querySelectList = async () => {
  classNameArr.value = await queryDictData({ typeCode: "className" });
};
// 查询巡检清单
const queryTable = async () => {
  const params = queryParams.value;
  // const data = await InspectionLogAPI_queryPage(params);
  // tableData.value = data?.data;
  // total.value = data?.total || 0;
};
// 重置筛选条件和巡检清单
const resetTable = async () => {
  queryParams.value = {
    times: "",
    className: route.query.className ? route.query.className.toUpperCase() : "",
    status: "",
    systemCode: "",
    group: "",
    name: "",
    pageNum: 1,
    pageSize: 10
  };
  queryTable();
};
// 从详情返回主页面
const backMainPage = () => {
  isMain.value = true;
};
// 查看
const handleView = (row: any) => {
  isMain.value = false;
  isView.value = false;
  checkLogId.value = row.checkPlanId;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: 100%;

  .equip-form {
    margin-bottom: 8px;

    :deep(.px-form-item) {
      width: 20%;
      margin-bottom: 8px;
    }

    :deep(.px-button) {
      margin-top: -8px;
    }
  }

  .equip-table {
    margin-bottom: 10px;
  }

  .equip-table-pagination {
    position: relative;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 30px;
    padding: 0 !important;
  }
}
</style>
